//- Copyright (C) 2023 Beijing Huaxia Chunsong Technology Co., Ltd. 
//- <https://www.chatopera.com>, Licensed under the Chunsong Public 
//- License, Version 1.0  (the "License"), https://docs.cskefu.com/licenses/v1.html
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.
//- Copyright (C) 2018-Jun. 2023 Chatopera Inc, <https://www.chatopera.com>
//- Licensed under the Apache License, Version 2.0
//- http://www.apache.org/licenses/LICENSE-2.0
//-
    原始 Freemarker 文件位置：https://gitlab.chatopera.com/chatopera/cskefu/blob/760e130e770a96a43e8f6f2c8a1eb0885c0bbf90/contact-center/app/src/main/resources/templates/apps/cca/mainagentuser_callout.html
    该页面项目中暂时没有使用，此处是没有完全转化的 Pug 文件
    如果提供这个页面，需要参考 Freemarker 原文件完成转化或参考实现

html
    head
        script(language='javascript').
            
            cursession = "<#if curagentuser??>${curagentuser.userid!''}</#if>" ;
                var userid = "${curagentuser.userid!''}" , agentserviceid = "${curagentuser.agentserviceid!''}" , agentuserid = "${curagentuser.id}";
            
    body
        .main-agentuser
            .chat-agent-callout(style='height: 102%;')
                h1.site-h1
                    // 			<#if curagentuser??>${curagentuser.username!''}（${curagentuser.region!''}）
                    // 				<div style="float:right;" class="ukefu-service-btn">
                    // 					<a href="/agent/summary.html?userid=${curagentuser.userid!''}&agentserviceid=${curagentuser.agentserviceid!''}&agentuserid=${curagentuser.id}" data-toggle="ajax" data-width="950" data-height="450" title="记录服务小结"><button class="layui-btn layui-btn-small"><i class="kfont">&#xe65c;</i> 服务小结</button></a>
                    // 					<a href="/agent/calloutcontact/add.html?userid=${curagentuser.userid!''}&agentserviceid=${curagentuser.agentserviceid!''}&agentuserid=${curagentuser.id}" data-toggle="ajax" data-width="950" data-height="550" title="选择转接对象"><button class="layui-btn layui-btn-small"><i class="kfont">&#xe7be;</i> 转接坐席</button></a>
                    // 					&lt;!&ndash;<a href="/agent/transfer.html?userid=${curagentuser.userid!''}&agentserviceid=${curagentuser.agentserviceid!''}&agentuserid=${curagentuser.id}" data-toggle="ajax" data-width="950" data-height="550" title="选择转接对象"><button class="layui-btn layui-btn-small"><i class="kfont">&#xe7be;</i> 转接坐席</button></a>&ndash;&gt;
                    // 					<a href="/agent/end.html?id=${curagentuser.id!''}" data-toggle="tip" data-title="请确认是否关闭和用户“${curagentuser.username!''}”的对话？"><button class="layui-btn layui-btn-small layui-btn-danger"><i class="kfont">&#xe621;</i> 结束对话</button></a>
                    // 				</div>
                    // 			</#if>
                //         <#if contacts?? && curagentuser??>
                //             <#include "/apps/agent/calloutcontact/edit.html">
                //         <#else>
                //             <#include "/apps/agent/calloutcontact/add.html">
                //         </#if>
        // <#if contacts?? && curagentuser??>
        input#contactsId(hidden, value='${contacts.id!\'\'}')
        input#creater(hidden, value='${contacts.creater!\'\'}')
        .ukefu-chat-prop
            .ukefu-prop-list
                .layui-side-scroll
                    .layui-collapse
                        .layui-colla-item
                            h2.layui-colla-title 往来历史
                            .layui-colla-content.layui-show
                                #timeline.timeline-container(type='text').
                                    
                                    
                                // <div id="timeline" class="timeline-container" type="text" style="height: 617px; overflow-y: auto;">
                                // </div>
        style.
            
            .card {
                    /* Add shadows to create the "card" effect */
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                    transition: 0.3s;
                    margin-top: 5px;
                }
            
                /* On mouse-over, add a deeper shadow */
                .card:hover {
                    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                }
            
                /* Add some padding inside the card container */
                .container {
                    width: 100%;
                    word-break: break-all;
                }
            
        script(src='/js/CSKeFu_Rest_Request.v1.js')
        script.
            
            function getNotesByContactId () {
                    // 获取数据
                    var id = $('#contactsId').val();
                    var payload = {
                        path: 'contacts/notes',
                        data: { ops: "fetch", contactid: id },
                    };
                    restApiRequest(payload).then(function (data) {
                        // remove a click exchange and set color to gray
                        // AUTH_ERROR
                        if(data.status && data.status === "AUTH_ERROR"){
                            handleRestApiFail(data.status);
                            return;
                        }
            
                        if(data.rc === 0){
                            if(data.totalElements > 0) {
                                for(var item of data.data){
                                    $("#timeline").append('<div class="card">' +
                                        '<div class="container">' +
                                        '<h4>时间：' + item.updatetime + '</h4>' +
                                        '<h5>笔记者：' + item.creatername + '</h5>' +
                                        '<h5>事件类型：' + item.category + '</h5>' +
                                        '<div>笔记：' + item.content + '</div>' +
                                        '</div>' +
                                        '</div>');
                                }
                            }
                        } else {
                        }
                    }, function (err) {
                        console.log(err)
                    });
                }
            
                // unselect tag
                function unOrselectTag(id) {
                    var el = $("#tag_" + id);
                    var xid = el.attr("name");
            
                    if(xid){
                        // unselected tag
                        var payload = {
                            path: 'contacts/tags',
                            data: {
                                ops: "remove",
                                xid: xid,
            
                            },
                        };
                        restApiRequest(payload).then(function (data) {
                            if(data.status && data.status === "AUTH_ERROR"){
                                handleRestApiFail(data.status);
                                return;
                            }
            
                            if(data.rc === 0){
                                console.log(data.data);
                                el.removeClass("ukefu-label").addClass("unselectedClass").attr("name", "");
                            } else {
                            }
                        }, function (err) {
                            console.log(err)
                        });
                    } else  {
                        // select tag
                        var contactid = $('#contactsId').val();
                        var payload = {
                            path: 'contacts/tags',
                            data: {
                                ops: "create",
                                contactid: contactid,
                                tagId: id,
                            },
                        };
            
                        restApiRequest(payload).then(function (data) {
                            if(data.status && data.status === "AUTH_ERROR"){
                                handleRestApiFail(data.status);
                                return;
                            }
            
                            if(data.rc === 0){
                                console.log(data.data);
                                el.removeClass("unselectedClass").addClass("ukefu-label").attr("name", data.data.id);
                            } else {
                            }
                        }, function (err) {
                            console.log(err)
                        });
                    }
                }
            
                // get tags
                function getTags(){
                    var id = $('#contactsId').val();
                    var payload = {
                        path: 'contacts/tags',
                        data: {
                            ops: "fetch",
                            contactid: id,
                        },
                    };
                    restApiRequest(payload).then(function (data) {
                        if(data.status && data.status === "AUTH_ERROR"){
                            handleRestApiFail(data.status);
                            return;
                        }
            
                        if(data.rc === 0){
                            var tagsData = data.data;
            
                            for (var item of tagsData){
                                if(item.tagged){
                                    $("#contactTags").append(
                                        '<small name="' + item.xid + '" id="tag_' + item.id + '" class="ukefu-label" style="margin: 0 6px 5px 0;cursor: pointer;" onclick="unOrselectTag(\'' + item.id + '\')">' + item.name + '</small>'
                                    );
                                } else  {
                                    $("#contactTags").append(
                                        '<small name="" id="tag_' + item.id + '" class="unselectedClass" style="margin: 0 6px 5px 0; cursor: pointer;" onclick="unOrselectTag(\'' + item.id + '\')">' + item.name + '</small>'
                                    );
                                }
                            }
                        } else {
                        }
                    }, function (err) {
                        console.log(err)
                    });
                }
            
            
                layui.use('layer', function() {
                    layer = layui.layer;
            
                    // get all notes by contact id.
                    getNotesByContactId();
            
                    // get tags
                    getTags()
            
                    // add notes
                    $('#notesAddBtn').on('click', function(){
                        var content = $('#notesContent').val() || '';
                        if(!content) return;
            
                        var id = $('#contactsId').val();
                        var category = $("#notesCategory option:selected").text();
            
                        var payload = {
                            path: 'contacts/notes',
                            data: {
                                ops: "create",
                                contactid: id,
                                category: category,
                                content: content,
                                agentuser: '',
                                onlineuser: ''
                            },
                        };
                        restApiRequest(payload).then(function (data) {
                            if(data.status && data.status === "AUTH_ERROR"){
                                handleRestApiFail(data.status);
                                return;
                            }
            
                            if(data.rc === 0){
                                var item = data.data;
                                // get all notes by contact id.
                                $("#timeline").prepend('<div class="card">' +
                                    '<div class="container">' +
                                    '<h4><b>时间：' + item.updatetime + '</b></h4>' +
                                    '<h5>笔记者：' + item.creatername + '</h5>' +
                                    '<h5>事件类型：' + category + '</h5>' +
                                    '<div>笔记：' + content + '</div>' +
                                    '</div>' +
                                    '</div>');
                            } else {
                            }
                        }, function (err) {
                            console.log(err)
                        });
                    });
                });
            
        // <#else>
        .ukefu-chat-prop
            .ukefu-prop-list
                .layui-side-scroll
                    .layui-tab(style='margin-top:0px;')
                        ul.layui-tab-title
                            li.layui-this 访客
                            li 历史
                        .layui-tab-content(style='padding: 5px 0px 0px;')
                            .layui-tab-item.layui-show
                                .box
                                    .box-title
                                        h1.site-h1(style='background-color:#EEEEEE;')
                                            | 
访问信息

                                            div(style='float:right;')
                                                button.layui-btn.layui-btn-small.layui-btn-radius.layui-btn-danger(href='/agent/blacklist/add.html?userid=${curagentuser.userid!\'\'}&agentserviceid=${curagentuser.agentserviceid!\'\'}&agentuserid=${curagentuser.id}&times=${serviceCount!0}&chattime=<#if onlineUser?? && onlineUser.betweentime??>${onlineUser.betweentime}<#else>0</#if>', data-toggle='ajax', data-title='拉黑访客', data-width='900') 拉黑访客
                                    .box-body(style='padding:0px 10px;position: relative;')
                                        //                             <#include "/apps/agent/channel/phone.html">
                                        // 							<#if curagentuser.name??>
                                        // 							<ul class="info-list">
                                        // 								<li>
                                        // 									姓名：
                                        // 									<span class="tgreen">
                                        // 									${curagentuser.name!''}
                                        // 								    </span>
                                        // 								</li>
                                        // 								<#if curagentuser.phone??>
                                        // 								<li>
                                        // 									电话：
                                        // 								    <span class="tgreen">
                                        // 									${curagentuser.phone!''}
                                        // 								    </span>
                                        // 								</li>
                                        // 								</#if>
                                        // 								<#if curagentuser.email??>
                                        // 								<li>
                                        // 									邮件：
                                        // 								    <span class="tgreen">
                                        // 									${curagentuser.email!''}
                                        // 								    </span>
                                        // 								</li>
                                        // 								</#if>
                                        // 								<#if curagentuser.resion??>
                                        // 								<li>
                                        // 									来访原因：
                                        // 								    <span class="tgreen">
                                        // 									${curagentuser.resion!''}
                                        // 								    </span>
                                        // 								</li>
                                        // 								</#if>
                                        // 							</ul>
                                        // 							</#if>
                                        // 							<#if curAgentService?? && curAgentService.trans?? && curAgentService.trans>
                                        // 							<ul class="info-list">
                                        // 								<li>
                                        // 									转接：
                                        // 									<span class="tgreen">
                                        // 									<i class="layui-icon" style="color:#19a55d;">&#xe618;</i>
                                        // 								    </span>
                                        // 								</li>
                                        // 								<#if curAgentService.transtime??>
                                        // 								<li>
                                        // 									转接时间：
                                        // 								    <span class="tgreen">
                                        // 									${curAgentService.transtime?string("yyyy-MM-dd HH:mm:ss")}
                                        // 								    </span>
                                        // 								</li>
                                        // 								</#if>
                                        // 								<#if curAgentService.transmemo??>
                                        // 								<li>
                                        // 									转接附言：
                                        // 								    <span class="tgreen">
                                        // 									${curAgentService.transmemo!''}
                                        // 								    </span>
                                        // 								</li>
                                        // 								</#if>
                                        // 							</ul>
                                        // 							</#if>
                            .layui-tab-item
                                .box
                                    .box-title
                                        h1.site-h1(style='background-color:#EEEEEE;').
                                            
                                            历史记录
                                            
                                    .box-body(style='padding:0px 10px;')
                                        ul.info-list.ukefu-quick-reply
                                            // 								<#if agentServiceList?? && agentServiceList?size gt 0>
                                            // 								<#list agentServiceList as agentService>
                                            // 								<li class="ukefu-agentservice-list">
                                            // 									<a href="/service/online/chatmsg.html?id=" + agentService.id + "&title=false" data-toggle="ajax" data-width="950" data-height="500" data-title="服务记录">
                                            // 										<span class="quick-reply" style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;max-width:200px;display: inline-block;" data-id="content_${agentService.id!''}">${agentService.username!''}</span>
                                            // 										<div class="ukefu-agentservice-his">坐席：${agentService.agentusername!''}</div>
                                            // 										<div style="color:#333;position: relative;">
                                            // 											${agentService.servicetime?string("yyyy-MM-dd HH:mm:ss")}
                                            // 											<div class="ukefu-agentservice-his">时长：${(agentService.sessiontimes/(1000*60*60))?string('00')}:${((agentService.sessiontimes%(1000*60*60))/(1000*60))?string('00')}:${((agentService.sessiontimes%(1000*60))/(1000))?string('00')}</div>
                                            // 										</div>
                                            // 									</a>
                                            // 								</li>
                                            // 								</#list>
                                            // 								<#else>
                                            // 								<li style="list-style: none;background-image: url();padding: 50px 0 50px;">
                                            // 									<div class="ukefu-empty">
                                            // 										<i class="layui-icon"></i>
                                            // 										<div style="">还没有咨询记录</div>
                                            // 									</div>
                                            // 								</li>
                                            // 								</#if>
        // </#if>
